<template>
	<view class="bigBox">
		<h1>合同文件模板</h1>
		<text class="file_title">XLS.100KB.文件夹名</text>
		<view class="imgBox">
			<image src="../../../static/lgow.png" mode="" class="text_logo"></image>
		<button class="btnYuLan">预览</button>
		</view>
		
		<ul class="more_list">
			<li>
				<text>上传人员</text>
				<text>
					<image src="../../../static/user.png" mode="" class="file_more_logo"></image>
				赵小刚
				</text>
			</li>
			<li>
				<text>文件描述</text>
				<text>
					添加描述
				</text>
			</li>
			<li>
				<text>关联业务</text>
				<text>
					选择关联
				</text>
			</li>
			<li>
				<text>上传时间</text>
				<text class="timeS">
					2019-08-22 12:00
				</text>
			</li>
			<li>
				<text>更新时间</text>
				<text class="timeS">
					2019-08-22 12:00
				</text>
			</li>
		</ul>
		
		
		
		
		<text class="qeqe">评论列表</text>
		<ul class="pingTit">
			<li>
				<image src="../../../static/user.png" class="addImg"  mode=""></image>
			<view class="pingView">
				<view class="left_LLL">
					<view>
						<text class="aaa">周小明</text>
						<text class="ddd">销售经理</text>
					</view>
					<text class="ddd">22:31</text>
				</view>
				<text class="aaa">非常不错的分享，对我们的工作很有参考价值。</text>
			</view>
			</li>
			<li>
				<image src="../../../static/user.png" class="addImg"  mode=""></image>
			<view class="pingView">
				<view class="left_LLL">
					<view>
						<text class="aaa">周小明</text>
						<text class="ddd">销售经理</text>
					</view>
					<text class="ddd">22:31</text>
				</view>
				<text class="aaa">非常不错的分享，对我们的工作很有参考价值。</text>
			</view>
			</li>
			<li>
				<image src="../../../static/user.png" class="addImg"  mode=""></image>
			<view class="pingView">
				<view class="left_LLL">
					<view>
						<text class="aaa">周小明</text>
						<text class="ddd">销售经理</text>
					</view>
					<text class="ddd">22:31</text>
				</view>
				<text class="aaa">非常不错的分享，对我们的工作很有参考价值。</text>
			</view>
			</li>
			<li>
				<image src="../../../static/user.png" class="addImg"  mode=""></image>
			<view class="pingView">
				<view class="left_LLL">
					<view>
						<text class="aaa">周小明</text>
						<text class="ddd">销售经理</text>
					</view>
					<text class="ddd">22:31</text>
				</view>
				<text class="aaa">非常不错的分享，对我们的工作很有参考价值。</text>
			</view>
			</li>
			<li>
				<image src="../../../static/user.png" class="addImg"  mode=""></image>
			<view class="pingView">
				<view class="left_LLL">
					<view>
						<text class="aaa">周小明</text>
						<text class="ddd">销售经理</text>
					</view>
					<text class="ddd">22:31</text>
				</view>
				<text class="aaas">非常不错的分享，对我们的工作很有参考价值。</text>
			</view>
			</li>
		</ul>
		
		
		<view class="bottom_Alert">
			<input type="text" @click="show=true"  placeholder="我来说两句">
		</view>
		
		<u-keyboard mode="number" @change="valChange" @backspace="backspace"   @close="close" @open="open"  :show="show" ></u-keyboard>
		
		
		
	</view>
</template>

<script>
	export default {
			data() {
				return {
					value: '',
					show: false
				}
			},
			methods: {
				// 按键被点击(点击退格键不会触发此事件)
				valChange(val) {
					// 将每次按键的值拼接到value变量中，注意+=写法
					this.value += val;
					console.log(this.value);
				},
				// 退格键被点击
				backspace() {
					// 删除value的最后一个字符
					if(this.value.length) this.value = this.value.substr(0, this.value.length - 1);
					console.log(this.value);
				},
				close(){
					this.show=false
				}
			}
		}
</script>

<style>
	.bottom_Alert>input{
		border-radius: 15px;
	}
	.bottom_Alert{
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 30px;
		background-color: white;
	}
	.aaas{
		font-size: 14px;
		color: #666666;
		line-height: 50px;
	}
	.left_LLL>view>text{
		margin-left: 5px;
	}
	.aaa{
		font-size: 14px;
		color: #666666;
	}
	.ddd{
		font-size: 12px;
		color: #999999;
	}
	.left_LLL{
		display: flex;
		justify-content: space-between;
	}
	.pingView{
		display: flex;
		flex-direction: column;
	}
	.addImg{
		width: 36px;
		height: 36px;
	}
	.pingTit>li{
		margin-left: 10px;
		display: flex;
		/* line-height: 30px; */
		margin-top: 7px;
		height: 70px;
		background-color: white;
	}
	.qeqe{
		line-height: 70px;
	}
	.timeS{
		color: black;
	}
	.file_more_logo{
		width: 24px;
		height: 24px;
	}
	.more_list>li{
		width:100vw;
		background-color: white;
		height: 50px;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		color:#999999;
		align-items: center;
		margin-top: 3px;
	}
	.bigBox{
		background-color:rgba(242, 242, 242, 0.5);
	}
	.btnYuLan{
		width: 80px;
		height: 30px;
		color: #0079fe;
		font-size:12px ;
		line-height: 30px;
		border: 1px solid #0079fe;
		border-radius: 18px;
	}
	.text_logo{
		width: 90px;
		height:120px;
	}
	.imgBox{
		width: 100%;
		height: 200px;
		text-align: center;
		/* line-height: 300px; */
	}
	h1{
		font-size: 22px;
		font-weight: bold;
	}
*{
	padding: 0;
	margin: 0;
	list-style-type: none;
}
.file_title{
	font-size: 12px;
	color: #cccccc;
	margin-top: 40px;
}
</style>
